{include file="common/header"}
<script type="text/javascript" src="/admin/js/region.js"></script>
<style type="text/css">
    .el-cascader .el-input.is-disabled .el-input__inner{border: 0;background: transparent;color: #606266;cursor: auto;padding: 0}
    .el-cascader .el-input__suffix{display: none}
</style>
<div id="app" v-cloak>
    <el-container class="el-layout">
        <el-tabs v-model="formIndex" @tab-click="formClick" :tab-position="position">
			<el-tab-pane v-for="(item, index) in form" :key="index" :label="item.name" :name="String(index)"></el-tab-pane>
        </el-tabs>
        <el-container>
            <div class="el-content">
                <div class="el-curd">
                    <el-form 
                        ref="search" 
                        class="el-curd-header" 
                        size="small" 
                        :inline="true" 
                        :model="search" 
                        @submit.native.prevent>
                        <el-form-item class="el-button-form">
                            <el-button icon="el-icon-delete" type="danger" @click="remove()" :disabled="rows.length > 0 ? false : true">
                                <span class="title">删除</span>
                            </el-button>
                        </el-form-item>
                        <el-form-item class="el-search-form">
                            <el-input placeholder="请输入关键词搜索" v-model="search.keyword" @keyup.enter.native="searchData()">
                                <el-button slot="append" icon="el-icon-search"@click="searchData()"></el-button>
                            </el-input>
                            <el-button type="info" icon="el-icon-refresh" @click="searchData()">
                                <span class="title">刷新</span>
                            </el-button>
                        </el-form-item>
                    </el-form>
                    <div class="el-curd-table">
                        <el-table
                            v-loading="loading"
                            :data="table"
                            @sort-change="sortChange"
                            @expand-change="readChange"
                            @selection-change="checkSelected">
                            <el-table-column type="expand">
                                <template slot-scope="scope">
                                    <el-form label-width="100px">
                                        <el-form-item label="IP地址：">{{scope.row.ip}}</el-form-item>
                                        <el-form-item label="用户：">{{scope.row.user == null ? '游客' : scope.row.user.email}}</el-form-item>
                                        <el-form-item label="国家：">{{scope.row.country}}</el-form-item>
                                        <el-form-item label="省份：">{{scope.row.province}}</el-form-item>
                                        <el-form-item label="城市：">{{scope.row.city}}</el-form-item>
                                    </el-form>
                                </template>
                            </el-table-column>
                            <el-table-column type="selection" width="55"></el-table-column>
                            <el-table-column v-for="(item, index) in formItemField" :label="item.field">
                                <template slot-scope="scope">
                                    <template v-if="item.is === 'el-cascader'">
                                        <el-cascader :value="scope.row.content[item.field]" :options="region" placeholder="未选择" disabled></el-cascader>
                                    </template>
                                    <div v-else>{{scope.row.content[item.field]}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="read" label="状态" sortable="custom">
                                <template slot-scope="scope">{{scope.row.read === 1 ? '已读' : '未读'}}</template>
                            </el-table-column>
                            <el-table-column prop="create_time" label="提交时间" sortable="custom"></el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <a href="javascript:;" @click="remove(scope.row)">删除</a>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination
                            @size-change="pageSizeChange"
                            @current-change="pageChange"
                            :current-page="search.page"
                            :page-size="search.pageSize"
                            :page-sizes="pageSizes"
                            :total="pageTotal"
                            layout="total, sizes, prev, pager, next, jumper"
                            background
                            hide-on-single-page>
                        </el-pagination>
                    </div>
                </div>
            </div>
        </el-container>
    </el-container>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                position: document.body.clientWidth > 768 ? 'left' : 'top',
                rows: [],
                table: [],
                form: {:json_encode($form)},
                formIndex: '0',
                search:{
                    id: '',
                    date: [],
                    keyword: "",
                    page: 1,
                    pageSize: 20,
                    prop: "create_time", 
                    order: "desc",
                },
                pageSizes: [20, 50, 100, 200, 500],
                pageTotal: 0,
                indexUrl: "form/message/index",
                updateUrl: "form/message/update",
                deleteUrl: "form/message/delete",
                loading: false,
            }
        },
        mounted () {
            let self = this;
            window.onresize = function(){
                self.position = document.body.clientWidth > 768 ? 'left' : 'top';
            };
        },
        computed: {
            formItemField() {
                return this.form.length > 0 ? this.form[this.formIndex]['field'] : [];
            }
        },
        created () {
            this.getData();
        },
        methods: {
            /**
             * 获取数据
             */
            getData() {
                let self     = this;
                self.loading = true;
                self.search.id = self.form.length > 0 ? self.form[self.formIndex]['id'] : '';
                self.search.order = self.search.order === 'ascending' ? 'asc' : 'desc';
                request.post(self.indexUrl, self.search, function(res) {
                    self.table = res.data;
                    self.pageTotal = res.count;
                    self.loading = false;
                });
            },
            /**
             * 切换form
             */
            formClick() {
                this.getData();
            },
            /**
             * 排序改变
             * @param  {Object} v 当前排序
             */
            sortChange(v) {
                this.search = Object.assign({}, this.search, {prop: v.prop , order: v.order});
            },
            /**
             * 已读
             */
            readChange(row) {
                let self = this;
                request.post(self.updateUrl, {id: row.id}, function(res) {
                    row.read = 1;
                });
            },
            /**
             * 行删除、批量删除
             * @param  {Object} row 当前行
             */
            remove(row = "") {
                let self = this;
                let ids  = row === "" ? common.arrayColumn(self.rows,'id') : [row.id]; 
                self.$confirm('确定删除吗？', '', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request.post(self.deleteUrl, {'ids': ids}, function(res){
                        if (res.status === 'success') {
                            self.getData();
                        } else {
                            self.$notify({ showClose: true, message: res.message, type: res.status});
                        }
                    });
                }).catch(() => {});
            },
            /**
             * 选中行
             * @param  {Object} rows 多行数
             */
            checkSelected(rows) {
                this.rows = rows;
            },
            /**
             * 关键词/日期搜索
             * @param  {Object} value 搜索内容
             */
            searchData() {
                this.search = Object.assign({}, this.search, {page: 1});
            },
            /**
             * 分页个数改变时
             * @param  {Number} val 每页数量
             */
            pageSizeChange(val) {
                this.search = Object.assign({}, this.search, {page: 1, pageSize: val});
            },
            /**
             * 分页改变时
             * @param  {String} val 当前页
             */
            pageChange(val) {
                this.search = Object.assign({}, this.search, {page: val});
            },
        },
        watch: {
            search() {
                this.getData();
            }
        }
    })
</script>
{include file="common/footer"}